<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('个人扫码单列表')" />
    <link href="../static/css/bootstrap-select.min.css" th:href="@{/css/bootstrap-select.min.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <label style="width: 120px;">订单创建时间：</label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginCreateTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endCreateTime]"/>
                            </li>
                            <!--<li>
                                <label>用户id：</label>
                                <input type="text" name="userId"/>
                            </li>-->
                            <li>
                                <label>联系人：</label>
                                <input type="text" name="userName"/>
                            </li>
                            <li>
                                <label>联系电话：</label>
                                <input type="text" name="userPhone"/>
                            </li>
                            <li>
                                <label>详细地址：</label>
                                <input type="text" name="userAddress"/>
                            </li>
                            <li>
                                <label>故障类型：</label>
                                <input type="text" name="serviceTypeId"/>
                            </li>
                            <li>
                                <label>订单状态：</label>
                                <select name="orderState" th:with="type=${@dict.getType('order_state')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <!--<li>
                                <label>维修数量：</label>
                                <input type="text" name="orderNumber"/>
                            </li>-->
                            <!--<li>
                                <label>完工订单备注：</label>
                                <input type="text" name="completeRemark"/>
                            </li>
                            <li>
                                <label>提成点管辖区域 多个用逗号隔开 ：</label>
                                <input type="text" name="orderQrcodeArea"/>
                            </li>
                            <li>
                                <label>服务费 ：</label>
                                <input type="text" name="orderServiceMoney"/>
                            </li>
                            <li>
                                <label>上门费：</label>
                                <input type="text" name="orderDoorMoney"/>
                            </li>-->
                            <li>
                                <label>接单师傅：</label>
                                <input type="text" name="storePhone"/>
                            </li>
                            <!--<li>
                                <label>抽成费用：</label>
                                <input type="text" name="orderFixdraw"/>
                            </li>-->
                            <li>
                                <label style="width: 160px;">固定抽成支付状态：</label>
                                <select name="orderFixdrawState" th:with="type=${@dict.getType('order_fixdraw_state')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <li>
                                <label>网点电话：</label>
                                <input type="text" name="rakerStorePhone"/>
                            </li>
                            <li style="width: 700px;">
                                <label style="width: 100px;">客户区域：</label>
                                <div class="col-sm-8">
                                    <select class="selectpicker form-control" onchange="initCity()" id="orderProvince" name="orderProvince">
                                        <option value="">--省份--</option>
                                    </select>
                                    <select class="selectpicker form-control" onchange="initRegion()" id="orderCity" name="orderCity">
                                        <option value="">--城市--</option>
                                    </select>
                                    <select class="selectpicker form-control" id="orderDistrict" name="orderDistrict">
                                        <option value="">--县区--</option>
                                    </select>
                                </div>
                            </li>
                            <!--<li>
                                <label>省份：</label>
                                <input type="text" name="orderPrivinceName"/>
                            </li>
                            <li>
                                <label>省份id：</label>
                                <input type="text" name="orderProvince"/>
                            </li>
                            <li>
                                <label>城市：</label>
                                <input type="text" name="orderCityName"/>
                            </li>
                            <li>
                                <label>城市id：</label>
                                <input type="text" name="orderCity"/>
                            </li>
                            <li>
                                <label>区县：</label>
                                <input type="text" name="orderDistrictName"/>
                            </li>
                            <li>
                                <label>区县id：</label>
                                <input type="text" name="orderDistrict"/>
                            </li>-->
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <!--<div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="zsyh:personOrder:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="zsyh:personOrder:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="zsyh:personOrder:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="zsyh:personOrder:export">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>-->
            <div class="col-sm-12 select-table table-bordered">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <script src="../static/js/bootstrap-select.min.js" th:src="@{/js/bootstrap-select.min.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('zsyh:personOrder:edit')}]];
        var removeFlag = [[${@permission.hasPermi('zsyh:personOrder:remove')}]];
        var orderStateDatas = [[${@dict.getType('order_state')}]];
        var orderFixdrawStateDatas = [[${@dict.getType('order_fixdraw_state')}]];
        var prefix = ctx + "zsyh/personOrder";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                modalName: "个人扫码单",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                {
                    field: 'id',
                    title: 'id  个人单 扫码单',
                    visible: false
                },
               /* {
                    field: 'userId',
                    title: '用户id'
                },*/
                    {
                        field: 'orderTypeName',
                        align: 'center',
                        title: '订单类型'
                    },
                    {
                        field: 'orderPrivinceName',
                        align: 'center',
                        title: '省份'
                    },
                    {
                        field: 'orderCityName',
                        align: 'center',
                        title: '城市'
                    },
                    {
                        field: 'orderDistrictName',
                        align: 'center',
                        title: '区县'
                    },{
                        field: 'userAddress',
                        align: 'center',
                        title: '详细地址'
                    },
                {
                    field: 'userName',
                    align: 'center',
                    title: '联系人'
                },
                {
                    field: 'userPhone',
                    align: 'center',
                    title: '联系电话'
                },

                {
                    field: 'serviceTypeName',
                    align: 'center',
                    title: '故障类型'
                },
                /*{
                    field: 'faultComment',
                    title: '故障说明 服务要求'
                },*/
                {
                    field: 'orderState',
                    align: 'center',
                    title: '订单状态',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(orderStateDatas, value);
                    }
                },
                    /* {
                         field: 'orderNumber',
                         align: 'center',
                         title: '维修数量'
                     },
                     {
                         field: 'orderImage',
                         title: '下单上传图片'
                     },*/
                /*{
                    field: 'completeImage',
                    title: '完工图片'
                },
                {
                    field: 'completeRemark',
                    title: '完工订单备注'
                },
                {
                    field: 'orderQrcodeArea',
                    title: '提成点管辖区域'
                },*/
                {
                    field: 'orderServiceMoney',
                    align: 'center',
                    title: '服务费 '
                },
                {
                    field: 'orderDoorMoney',
                    align: 'center',
                    title: '上门费'
                },
                {
                    field: 'storePerson',
                    align: 'center',
                    title: '接单师傅'
                },{
                    field: 'storePhone',
                    align: 'center',
                    title: '师傅电话'
                },
                {
                    field: 'orderFixdraw',
                    align: 'center',
                    title: '抽成费用'
                },
                {
                    field: 'orderFixdrawState',
                    align: 'center',
                    title: '固定抽成支付状态',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(orderFixdrawStateDatas, value);
                    }
                },
                /*{
                    field: 'rakerStoreName',
                    align: 'center',
                    title: '网点店铺'
                },{
                    field: 'rakerStorePerson',
                    align: 'center',
                    title: '网点联系人'
                },{
                    field: 'rakerStorePhone',
                    align: 'center',
                    title: '网点电话'
                },*/

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewPersonOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="viewOrder(\'' + row.id + '\')"><i class="fa fa-search"></i>查看报修图片</a>');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="viewOrderComplete(\'' + row.id + '\')"><i class="fa fa-search"></i>查看完工图片</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        function resetForm(){
            $.form.reset();
            // 地区下拉框初始化
            $("#orderProvince").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#orderCity").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#orderDistrict").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });

            // 动态加载省份选项数据
            initSelectOptions("orderProvince","0");
            initSelectOptions("orderCity","11111");
            initSelectOptions("orderDistrict","11111");
        }

        $(document).ready(function(){
            // 地区下拉框初始化
            $("#orderProvince").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#orderCity").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#orderDistrict").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });

            // 动态加载省份选项数据
            initSelectOptions("orderProvince","0");
        });// onReady

        /**
         * 动态生成select选项
         * @param selectId
         * @returns
         */
        function initSelectOptions(selectId,parentId) {
            var selectObj = $("#" + selectId);
            $.ajax({
                url : "personOrder/"+parentId,
                async : false,
                type : "GET",
                success : function(result) {
                    debugger;
                    var configs = result.rows;
                    selectObj.find("option:not(:first)").remove();
                    for (var i in configs) {
                        var addressConfig = configs[i];
                        var optionValue = addressConfig.id;
                        var optionText = addressConfig.areaName;
                        selectObj.append(new Option(optionText, optionValue));
                    }
                    debugger;
                    // 刷新select
                    selectObj.selectpicker('refresh');
                },
                error : function(result) {
                    toastr.error('获取['+ parentId + ']信息失败，原因：' + result.errorMessage);
                }
            });// ajax
        }

        /**
         * 根据选择的省份动态初始化城市options
         * @returns
         */
        function initCity() {
            // 当省份变动时，初始化城市和清空县区和街道
            var provinceSel = $("#orderProvince").val();
            initSelectOptions("orderCity", provinceSel);
            $("#orderDistrict").find("option:not(:first)").remove();
            $("#orderDistrict").selectpicker('refresh');
            /* $("#street").find("option:not(:first)").remove();
             $("#street").selectpicker('refresh');*/
        }

        /**
         * 根据选择的城市动态初始化区域options
         * @returns
         */
        function initRegion() {
            // 选择城市
            var citySel = $("#orderCity").val();
            initSelectOptions("orderDistrict", citySel);
        }

        function viewPersonOrder(id) {
            var url = prefix + "/edit/"+id;
            layer.open({
                type: 2,
                area: ['1200px', '800px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "查看详情",
                content:  url,
                closeBtn: 1,
                // 弹层外区域关闭
                shadeClose: true,
                end: function(){
                    //location.reload();
                },
                cancel: function(index) {
                    //location.reload();
                }
            });
        }


        function viewOrder(id) {
            var title="查看报修图片";
            var url= prefix + "/viewProof/"+id;
            var width;
            var height;
            var callback;
            //如果是移动端，就使用自适应大小弹窗
            if ($.common.isMobile()) {
                width = 'auto';
                height = 'auto';
            }
            if ($.common.isEmpty(title)) {
                title = false;
            }
            if ($.common.isEmpty(url)) {
                url = "/404.html";
            }
            if ($.common.isEmpty(width)) {
                width = 800;
            }
            if ($.common.isEmpty(height)) {
                height = ($(window).height() - 50);
            }
            if ($.common.isEmpty(callback)) {
                callback = function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                }
            }
            var index= layer.open({
                type: 2,
                area: [width + 'px', height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                closeBtn: 1,
                // 弹层外区域关闭
                shadeClose: true,
                yes: callback,
                end: function(){
                    //location.reload();
                },
                cancel: function(index) {
                    return true;
                }
            });
            //$.modal.open("查看物流", prefix + "/viewSend/"+id);
        }

    </script>
</body>
</html>